<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>


</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll" id="test33">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <!--<ul class="layui-nav layui-nav-tree"  lay-filter="test3">-->
                <!--<li class="layui-nav-item layui-nav-itemed">-->
                    <!--<a class="" href="javascript:;">所有商品</a>-->
                    <!--<dl class="layui-nav-child">-->
                        <!--<dd>-->
                            <!--<a href="javascript:;">列表一</a>-->
                            <!--<dl class="layui-nav-child">-->
                                <!--<dd><a href="javascript:;">列表一01</a></dd>-->
                            <!--</dl>-->
                        <!--</dd>-->
                        <!--<dd><a href="javascript:;">列表二</a></dd>-->
                        <!--<dd><a href="javascript:;">列表三</a></dd>-->
                        <!--<dd><a href="">超链接</a></dd>-->
                    <!--</dl>-->
                <!--</li>-->
                <!--<li class="layui-nav-item">-->
                    <!--<a href="javascript:;">解决方案</a>-->
                    <!--<dl class="layui-nav-child">-->
                        <!--<dd><a href="javascript:;">列表一</a></dd>-->
                        <!--<dd><a href="javascript:;">列表二</a></dd>-->
                        <!--<dd><a href="">超链接</a></dd>-->
                    <!--</dl>-->
                <!--</li>-->
                <!--<li class="layui-nav-item"><a href="">云市场</a></li>-->
                <!--<li class="layui-nav-item"><a href="">发布商品</a></li>-->
            <!--</ul>-->
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-allowClose="true" lay-filter="test2">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="111">文章列表</li>
                <li lay-id="222">发送信息</li>
                <li lay-id="333">权限分配</li>
                <li lay-id="444">审核</li>
                <li lay-id="555">订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="../zujian/layui/layuiCeShiYong.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['tree','element'], function(){
        var element = layui.element;
        // element.tabChange('test2', layid);
        // element.tabAdd('test2',{
        //     title: '选项卡的标题'
        //     //支持传入 html
        //     ,content: '选项卡的内容'
        //     ,id: '选项卡标题的lay-id属性值'
        // });
        // element.tabDelete('test2', '333'); //删除 lay-id="xxx" 的这一项
        var tree = layui.tree;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //渲染
        var inst1 = tree.render({
            // 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
            showLine:true,
            //true的时候只能点击左侧图标展开
            onlyIconControl:false,
            //手风琴模式,就是展开一级,邻居级别就自动合并,true的时候点击改级,临级别会合并
            accordion:true,
            //是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 href 参数（值为 url 格式）
            isJump:true,
            //是否开启修改图标模式,true的时候可以编辑和删除
            // edit:true,
            edit: ['add', 'update', 'del'],
            //  是否显示复选框
            showCheckbox:true,
            elem: '#test33'  //绑定元素
            ,id:'demoId' //定义索引
            , data: [{
                id:"1213",
                // 节点是否初始为选中状态（如果开启复选框的话），默认 false
                checked:false,
                // 节点是否初始展开，默认 false,只能展开一层
                spread:true,
                title: '江西'//一级菜单
                , children: [{
                    // 自定义各类默认文本，目前支持以下设定：  没有title的时候显示   defaultNodeName
                    text: {
                        defaultNodeName: '未命名' //节点默认名称
                        ,none: '无数据' //数据为空时的提示文本
                    },
                    title:'南昌', //二级菜单
                    id:"sldkfjsaldkfjlsa1"
                    , children: [{
                        //是否可用,
                        disabled:false,
                        checked:true,
                        id:"sldkfjsaldkfjlsa2",
                        href:"https://www.baidu.com",
                        title: '高新区' //三级菜单
                        //…… //以此类推，可无限层级
                    }]
                }]
            }, {
                title: '陕西' //一级菜单
                , children: [{
                    title: '西安' //二级菜单
                }]
            }]

            //////////////////////////////////////////////////////////////////////////////////////////////////////////////
            // 通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点
            ,operate: function(obj){
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素

                //Ajax 操作
                var id = data.id; //得到节点索引
                if(type === 'add'){ //增加节点
                    dyn("增加节点")
                    dyn(id)//这个是母节点的id
                    //返回 key 值,返回的是增加的节点的id
                    return haomiaoshijianchuo3suiji();
                } else if(type === 'update'){ //修改节点
                    dyn("修改节点")
                    dyn(elem.find('.layui-tree-txt').html())
                    dyn(id)
                    dyn(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                } else if(type === 'del'){ //删除节点
                    dyn("删除节点")
                    dyn(id)
                }
            }
            ////////operate: function(obj){   结束//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //  点击复选框时触发，返回的参数如下：
            ,oncheck: function(obj){
                dyn("=======点击复选框时触发=================得到当前点击的节点数据==================================")
                dyn(JSON.stringify(obj.data)); //得到当前点击的节点数据
                dyn("======点击复选框时触发======结果是true或者false,就是展开或者没有展开=======//得到当前节点的展开状态：open、close、normal=======================================")
                dyn(JSON.stringify(obj.checked)); //得到当前节点的展开状态：open、close、normal
                dyn("=====点击复选框时触发===========//得到当前节点元素==========================================")
                dyn(JSON.stringify(obj.elem)); //得到当前节点元素
                dyn("=================找到所有的被选中的====1=====================================")
                dyj($("div.layui-form-checked + span"))
                dyn("=================找到所有的被选中的====1。0=====================================")
                $("div.layui-form-checked + span")
                dyn("=================找到所有的被选中的====2=====================================")
                var xxx= $("div.layui-form-checked + span")

            }
            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        });
        //////var inst1 = tree.render结束////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //执行节点勾选
        tree.setChecked('demoId', 'sldkfjsaldkfjlsa1'); //单个勾选 id 为 1 的节点
        // tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点
    });

</script>


</body>
</html>